//
// Loaders
// refs:https://github.com/ConnorAtherton/loaders.css
//
$primary-color: $primary;
$ball-size: $spacer;
$margin: 2px !default;
$line-height: 2*$spacer;
$line-width: 4px !default;

@import "{}/node_modules/loaders.css/src/variables";
@import "{}/node_modules/loaders.css/src/mixins";
@import "{}/node_modules/loaders.css/src/animations/ball-beat";
@import "{}/node_modules/loaders.css/src/animations/pacman";

.loader,
.loader-full {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.loader-full {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; // background-color: rgba(255, 255, 255, 0.87);
  background-color: white;
  z-index: 1000;
}

.ball-beat {
  opacity: 1;
  transition: all 0.15s ease-in-out;
  &.hide {
    opacity: 0;
    display: none;
  }
  div {
    margin: 1;
    width: 10px;
    height: 10px;
    &:first-child {
      background-color: $pink;
    }
    &:nth-child(2) {
      background-color: $light-blue;
    }
    &:last-child {
      background-color: $yellow;
    }
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.ball-clip-rotate {
  >div {
    @include balls();
    @include global-animation();
    border: 4px solid $primary-color;
    border-bottom-color: transparent;
    height: 40px;
    width: 40px;
    background: transparent !important;
    display: inline-block;
    animation: rotate 0.75s 0s linear infinite;
  }
}